<script setup>
import {ref} from "vue";
import Counter from "./components/Counter.vue";
import NavBar from "./components/NavBar.vue";

const message = ref("你好")
const isLogin = ref(false); // 用户是否登录，默认为false
const pets = ref(['小猫', '小狗', '鼠鼠'])
const ch = ref('E')

const inputMessage = ref('')  // 接收输入框输入的值

function changeLoginState() {
  isLogin.value = !isLogin.value
}
</script>

<template>
  <NavBar></NavBar>

  <div class="alert alert-primary" role="alert">
    A simple primary alert—check it out!
  </div>
  <div class="alert alert-secondary" role="alert">
    A simple secondary alert—check it out!
  </div>
  <div class="alert alert-success" role="alert">
    A simple success alert—check it out!
  </div>
  <div class="alert alert-danger" role="alert">
    A simple danger alert—check it out!
  </div>
  <div class="alert alert-warning" role="alert">
    A simple warning alert—check it out!
  </div>
  <div class="alert alert-info" role="alert">
    A simple info alert—check it out!
  </div>
  <div class="alert alert-light" role="alert">
    A simple light alert—check it out!
  </div>
  <div class="alert alert-dark" role="alert">
    A simple dark alert—check it out!
  </div>

  <Counter :message="message">
    <p>{{ inputMessage }}</p>
    <input v-model="inputMessage" placeholder="input">

    <!--if语句-->
    <div>
      <p v-if="isLogin">已经登录了</p>
      <p v-else>还没有登录</p>
    </div>
    <button type="button" class="btn btn-primary" @click="changeLoginState">登录</button>

    <p v-if="ch === 'A'">A</p>
    <p v-else-if="ch === 'B'">B</p>
    <p v-else-if="ch === 'C'">C</p>
    <p v-else>D</p>

    <!--for语句-->
    <div v-for="item in pets">
      {{ item }}
    </div>
  </Counter>
</template>

<style scoped>

</style>
